import React, { Component } from 'react';
import { NavBar, SearchBar, Dropdown, Button, CheckList, Empty } from 'antd-mobile'
import "../styles/Search_xiang.scss"
import * as service from "../api/index"

class Search_xiang extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            add: '',
            min: '',
            max: ''
        };
    }
    async componentDidMount() {
        var res = await service.search({ keyword: this.props.history.location.state })
        // console.log(this.props.history.location.state);
        this.setState({ list: res.data.data })
    }
    async dian(value) {
        var res = await service.search({ keyword: value })
        this.setState({ list: res.data.data })
        this.setState({ add: '' })
    }
    //跳转进入详情页，传当前商品id
    shop_id(id) {
        // console.log(id);
        this.props.history.push({ pathname: '/detail', state: { proid: id } })
    }
    //最大值与最小值表单受控
    handleChange(e) {
        this.setState({ [e.target.name]: e.target.value })
    }
    //筛选价格
    shaixuan() {
        var newlist = this.state.list.filter((item) => { return item.originprice >= this.state.min && item.originprice <= this.state.max })
        this.setState({ list: newlist })
    }

    render() {
        return (
            <div className='Search_xiang'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>
                        <SearchBar placeholder='请输入内容' value={this.state.add}
                            onChange={value => {
                                // console.log(value);
                                this.setState({ add: value })
                            }}
                            onSearch={value => {
                                // console.log(value);
                                this.dian(value)
                            }}

                        />
                    </NavBar>
                    <Dropdown>
                        <Dropdown.Item key='sorter' title='排序'>
                            <div style={{ padding: 12 }}>
                                <CheckList defaultValue={['B']}>
                                    <CheckList.Item value='A'>全部商品</CheckList.Item>
                                    <CheckList.Item value='B' onClick={() => {
                                        this.state.list.sort((a, b) => b.originprice - a.originprice); this.setState({})
                                    }}>价格升序</CheckList.Item>
                                    
                                    <CheckList.Item value='C' onClick={() => {
                                        this.state.list.sort((a, b) => a.originprice - b.originprice); this.setState({})
                                    }}>价格降序</CheckList.Item>
                                </CheckList>
                            </div>
                        </Dropdown.Item>
                        <Dropdown.Item key='bizop' title='商机筛选' className='shuaixuan'>
                            <div style={{ padding: 20 }}>
                                <input type="text" placeholder='最低价格' name='min' value={this.state.min} onChange={(e) => { this.handleChange(e) }} />
                                -
                                <input type="text" placeholder='最高价格' name='max' value={this.state.max} onChange={(e) => { this.handleChange(e) }} />

                            </div>
                            <Button block color='primary' size='middl' onClick={() => this.shaixuan()}>
                                确认
                            </Button>
                        </Dropdown.Item>
                    </Dropdown>
                </div>
                <div className="box">
                    {
                        this.state.list != undefined ?
                            this.state.list.map((item, index) => {
                                return (
                                    <div className="one" key={index} onClick={() => { this.shop_id(item.proid) }}>
                                        <div className="left">
                                            <img src={item.img1} alt="" />
                                        </div>
                                        <div className="right">
                                            <h4>{item.proname}</h4>
                                            <p>￥{item.originprice}</p>
                                        </div>

                                    </div>
                                )
                            })
                            : alert('未查询到该商品，请重新搜索', this.props.history.go(-1))
                    }
                </div>
            </div>
        );
    }
}

export default Search_xiang;